<template>
  <view class="publishedBox">
    <textarea
      id="editContent"
      maxlength="500"
      @input="onEdit($event)"
    >
    </textarea>

    <view class="imageContent">
      <uniFilePicker
        limit="9"
        title="最多选择9张图片"
        auto-upload="true"
        url="http://"
        @progress="progress"
        @success="success"
        @fail="fail"
        @select="select"
        @delete="deletes"
      >

    </uniFilePicker>
    <view class="send" @click="send">发表</view>

    </view>
  </view>
</template>

<!-- 发表动态页面 -->
<script lang="ts" setup>
import uniFilePicker from '@/components/uni/uni-file-picker/uni-file-picker.vue'

import {
  onLoad,
  onReady,
  onShow,
  onHide,
  onUnload,
  onPageScroll,
} from '@dcloudio/uni-app'
import { ref } from 'vue'

//图片或者文件删除
const progress = (e) => {
  console.log('上传时' + e)
}
//图片或者文件删除
const success = (e) => {
  console.log('成功' + e)
}
//图片上传失败
const fail = (e) => {
  console.log('失败' + e)
}
//图选择
const select = (e: any) => {
  console.log(e)
  imageValue.value = e.tempFilePaths[0]
}
//图片删除
const deletes = (e) => {
  console.log(e)
}

//编辑文本事件
const onEdit = (e: AnyObject) => {
  textValue.value = e.target.value
}

//图片内容
const imageValue = ref([])

//文本内容
const textValue = ref<string>('')

//发表内容
const send = () => {
  if (textValue.value === '' || !textValue.value.trim()) {
    uni.showToast({
      title: '文本不能为空',
      icon: 'none',
      mask: true,
    })
    return
  }

  console.log(`文本内容==${textValue.value}`)
  console.log(`图片内容==${imageValue.value}`)
  uni.showToast({
    title: '发表成功',
    icon: 'none',
    mask: true,
  })
  // 返回上级页面
  uni.navigateBack({
    delta: 1,
  })
}

// 页面周期函数--监听页面加载
onLoad((e) => {})

// 页面周期函数--监听页面初次渲染完成
onReady(() => {})
// 页面周期函数--监听页面显示(not-nvue)
onShow(() => {})
// 页面周期函数--监听页面隐藏
onHide(() => {})
// 页面周期函数--监听页面卸载
onUnload(() => {})
</script>

<style scoped lang="scss">
.publishedBox {
  font-size: 30rpx;

  #editContent {
    width: 100%;
    height: 400rpx;
    padding: 20rpx;
  }

  .imageContent {
    width: 700rpx;
    height: 700rpx;
    padding: 20rpx;



      .send {
        width: 90rpx;
        height: 45rpx;
        padding: 5rpx 10rpx;
        border-radius: 6rpx;
        line-height: 45rpx;
        text-align: center;
        font-size: 28rpx;
        transform: translateY(-100%);
        color: rgb(255, 255, 255);
        background-color: rgb(70, 156, 249);
        margin-left: auto;
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
      }
    

 
  }
}
</style>
: string: string: string: any: any
